<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('详情信息')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="1200px" top="10vh" @close='close'>
    <!-- iec104 -->
    <el-table ref="multipleTable" key="multipleTableIec104" v-if="record.type === 'iec104'" size='mini' :data="analysisList" tooltip-effect="dark" style="width: 100%" max-height="600px" @sort-change='sortChange'>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type" align='center' :label="$t('消息帧')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="transfer_reason" align='center' :label="$t('传送原因')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.transfer_reason" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="information_object_address" align='center' min-width="120" :label="$t('信息对象地址')" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.information_object_address" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="common_address" align='center' :label="$t('公共地址')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.common_address" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- modbus -->
    <el-table ref="multipleTable" key="multipleTableModbus" v-if="record.type === 'modbus'" size='mini' :data="analysisList" tooltip-effect="dark" max-height="600px" style="width: 100%" @sort-change='sortChange'>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dev_addr" align='center' :label="$t('设备地址')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dev_addr" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_read_addr_start" align='center' :label="$t('读寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_read_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_read_addr_end" align='center' :label="$t('读寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_read_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_write_addr_start" align='center' :label="$t('写寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_write_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_write_addr_end" align='center' :label="$t('写寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_write_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :html="modbusValueRangeFormatter(scope.row)" :copyText="modbusValueRangeFormatter(scope.row)" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- opc -->
    <el-table ref="multipleTable" key="multipleTableOpc" v-if="record.type === 'opc'" size='mini' :data="analysisList" tooltip-effect="dark" max-height="600px" style="width: 100%" @sort-change='sortChange'>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="uuid" align='center' label="UUID" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.uuid" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="opnum" align='center' label="opnum" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.opnum" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tag_name" align='center' :label="$t('点名')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.tag_name" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value_type" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom' :formatter="valueFormatter"></el-table-column>
    </el-table>
    <!-- s7 -->
    <el-table ref="multipleTable" key="multipleTableS7" v-if="record.type === 's7'" size='mini' :data="analysisList" tooltip-effect="dark" max-height="600px" style="width: 100%" @sort-change='sortChange'>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="func" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.func" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="area" align='center' :label="$t('寄存器区间')" min-width="110" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.area" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="db" align='center' :label="$t('DB值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.db" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_addr_start" align='center' :label="$t('读寄存器起始地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_addr_start" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="reg_addr_end" align='center' :label="$t('读寄存器结束地址')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.reg_addr_end" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="tsize" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.tsize" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('数据值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- opcua -->
    <el-table ref="multipleTable" key="multipleTableS7" v-if="record.type === 'opcua'" size='mini' :data="analysisList" tooltip-effect="dark" max-height="600px" style="width: 100%" @sort-change='sortChange'>
      <el-table-column prop="ID" align='center' label="ID" width="80" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.ID" class="wid190">
          </tooltip>
        </template>
        <!-- <template slot-scope="scope">
          {{scope.$index + 1}}
        </template> -->
      </el-table-column>
      <el-table-column prop="time" align='center' :label="$t('时间')" min-width="150" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.time" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="TLP" align='center' :label="$t('传输协议类型')" min-width="120" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="TLPList[scope.row.TLP] || scope.row.TLP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="src_port" align='center' :label="$t('源端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_port" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="msg_type" align='center' :label="$t('消息类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.msg_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="serviceId" align='center' :label="$t('功能码')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.serviceId" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="nodes" align='center' :label="$t('节点名称')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.nodes" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="data_type" align='center' :label="$t('数据类型')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.data_type" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="value" align='center' :label="$t('值')" min-width="100" sortable='custom'>
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.value" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">{{ $t('取 消') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getArray } from '@/api/safe/analysis'
export default {
  name: 'detailDialog',
  data () {
    return {
      dialogVisible: false,
      analysisList: [],
      record: {
        type: 'iec104',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: '',
        sort: 'time',
        order: 'desc',
        page: 1,
        limit: 20
      },
      recordCopy: {
        type: 'iec104',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: '',
        sort: 'time',
        order: 'desc',
        page: 1,
        limit: 20
      },
      total: 0,
      rangeList: {
        '0': '关',
        '1': '开',
        '2': '开关'
      },
      valueRange: {
        '2-0': '开关',
        '1-0': '开',
        '0-0': '关'
      },
      TLPList: {
        '6': 'TCP',
        '17': 'UDP'
      }
    }
  },
  methods: {
    /**
     * DESTINATION_IP: "192.168.220.110"
        DESTINATION_PORT: "502"
        L4_PROTOCOL: "TCP_6"
        ORIG_COUNTER_PACKETS: "1"
        REPL_COUNTER_PACKETS: "0"
        SOURCE_IP: "192.168.220.100"
        SOURCE_PORT: "49158"
        START_TIMESTAMP: "2023-05-14 11:42:50"
        STOP_TIMESTAMP: "2023-05-14 11:47:51"
     */
    init (data, type) {
      this.dialogVisible = true
      this.record.type = type
      this.record.startTime = data.START_TIMESTAMP === '-' ? '' : data.START_TIMESTAMP
      this.record.endTime = data.STOP_TIMESTAMP === '-' ? '' : data.STOP_TIMESTAMP
      this.record.srcIp = data.SOURCE_IP
      this.record.dstIp = data.DESTINATION_IP
      this.listData()
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    // 列表
    listData () {
      let formData = Object.assign({}, this.record)
      getArray(this.record).then(res => {
        if (res.status === 0) {
          // 问题：当每页10条，第10页时，切换到每页100条，但是没有第十页
          // 这时分页会先进行每页条数切换请求（当前页为第10页的错误请求），再进行当前页切换请求（参数正确的请求）
          // 因为是异步的，如果第一个请求比第二个请求返回结果慢则会顶替正常请求
          if (res.info.count !== 0) {
            let newLimit = Math.ceil(res.info.count / formData.limit) // 计算当前请求最多可以有多少页
            if (newLimit < formData.page) { // 与当前页对比
              return // 最大页数小于当前页数则认为是错误请求
            }
          }
          // ---------
          this.total = res.info.count
          this.analysisList = res.info.data
        }
      })
    },
    valueFormatter (data) {
      if (data.value_type === 'BOOL') {
        return this.rangeList[data.value]
      } else {
        return data.value
      }
    },
    modbusValueRangeFormatter (row) {
      if (row.func && row.value_s && row.func.split(' ')[0] === '15') {
        return this.valueRange[row.value_s.trim()]
      } else {
        return row.value
      }
    },
    sortChange (data) {
      if (data.order) {
        this.record.sort = data.column.property
      } else {
        this.record.sort = 'time'
      }
      this.record.order = data.order === 'ascending' ? 'asc' : 'desc'
      this.listData()
    },
    close () {
      this.dialogVisible = false
      this.record = JSON.parse(JSON.stringify(this.recordCopy))
      this.analysisList = []
    }
  }
}
</script>
